<template>
  <div>
    <div class="search">
      <van-search disabled show-action placeholder="请输入小区或地址">
        <template #label>
          <span class="home-search" @click="$router.push('/city')">
            {{ city.label }}<van-icon name="play" class="home-search-icon" />
          </span>
          <span class="home-search-rigth-border"></span>
        </template>
        <template #left>
          <van-icon
            name="arrow-left"
            @click="$router.push('/')"
            style="margin-right: 10px; font-size: 20px"
            color="#fff"
          />
        </template>
        <template #action>
          <div>
            <div class="maps" @click="$router.push('/map')">
              <i class="iconfont icon-map"></i>
            </div>
          </div>
        </template>
      </van-search>
    </div>
    <!----------->
    <div class="subs" :class="{ popupRightS: show[3].type }">
      <van-sticky z-index="8">
        <van-grid direction="horizontal" :column-num="4" :border="false">
          <van-grid-item @click="showFn('area')"
            ><div class="gridItem">区域<i class="iconfont icon-arrow"></i></div
          ></van-grid-item>
          <van-grid-item @click="showFn('rentType')"
            ><div class="gridItem">方式<i class="iconfont icon-arrow"></i></div
          ></van-grid-item>
          <van-grid-item @click="showFn('price')"
            ><div class="gridItem">租金<i class="iconfont icon-arrow"></i></div
          ></van-grid-item>
          <van-grid-item @click="showFn('right')"
            ><div class="gridItem">筛选<i class="iconfont icon-arrow"></i></div
          ></van-grid-item>
        </van-grid>
        <!-- 弹出出选框框区域 -->
        <van-popup v-model="show[0].type" round position="top" duration="0">
          <van-picker
            show-toolbar
            :columns="areas"
            :loading="loading"
            toolbar-position="bottom"
            @cancel="show[0].type = false"
            @confirm="AreaFn"
          />
        </van-popup>
        <!-- 弹出出选框框方式 -->
        <van-popup v-model="show[1].type" round position="top" duration="0">
          <van-picker
            show-toolbar
            :columns="rentTypes"
            :loading="loading"
            toolbar-position="bottom"
            @cancel="show[1].type = false"
            @confirm="rentTypeFn"
          />
        </van-popup>
        <!-- 弹出出选框框方式 -->
        <van-popup v-model="show[2].type" round position="top" duration="0">
          <van-picker
            show-toolbar
            :columns="prices"
            :loading="loading"
            toolbar-position="bottom"
            @cancel="show[2].type = false"
            @confirm="priceFn"
          />
        </van-popup>
        <!-- 侧边弹出框 -->
        <van-popup
          z-index="191919"
          position="right"
          v-model="show[3].type"
          class="popupRight"
        >
          <div class="upo">
            <van-row>
              <van-col span="5" class="title">户型</van-col>
              <van-col span="17" class="checkbox">
                <ClickChange
                  v-for="(item, index) in condition.roomType"
                  :key="index"
                  :item="item"
                  :list="more"
                  @checked="ChangeFn"
                />
              </van-col>
            </van-row>
            <van-row>
              <van-col span="5" class="title">朝向</van-col>
              <van-col span="17" class="checkbox">
                <ClickChange
                  v-for="(item, index) in condition.oriented"
                  :key="index"
                  :item="item"
                  :list="more"
                  @checked="ChangeFn"
                />
              </van-col>
            </van-row>
            <van-row>
              <van-col span="5" class="title">楼层</van-col>
              <van-col span="17" class="checkbox">
                <ClickChange
                  v-for="(item, index) in condition.floor"
                  :key="index"
                  :item="item"
                  :list="more"
                  @checked="ChangeFn"
                />
              </van-col>
            </van-row>
            <van-row>
              <van-col span="5" class="title">房屋亮点</van-col>
              <van-col span="17" class="checkbox">
                <ClickChange
                  v-for="(item, index) in condition.characteristic"
                  :key="index"
                  :item="item"
                  :list="more"
                  @checked="ChangeFn"
                />
              </van-col>
            </van-row>
          </div>
          <van-tabbar fixed>
            <van-tabbar-item class="nope" @click="show[3].type = false"
              >取消</van-tabbar-item
            >
            <van-tabbar-item class="yep" @click="chickLoad">确定</van-tabbar-item>
          </van-tabbar>
        </van-popup>
      </van-sticky>
    </div>
    <!----------->
    <div class="list">
      <van-list
        v-model="loadingList"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="(item, index) in houseList" :key="index">
          <HouseList :item="item" />
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import HouseList from '@/components/HouseList.vue'
import { getCity } from '@/utils/storage'
import { getSearchPos, getHouse } from '@/api/homo'
import ClickChange from '@/components/ClickChange.vue'
export default {
  components: {
    HouseList,
    ClickChange
  },
  data () {
    return {
      city: '',
      condition: [],
      loading: true,
      areas: [
        {
          text: '区域',
          children: []
        },
        {
          text: '地铁',
          children: []
        }
      ],
      area: [],
      show: [
        { name: 'area', type: false },
        { name: 'rentType', type: false },
        { name: 'price', type: false },
        { name: 'right', type: false }
      ],
      rentTypes: [],
      rentType: [],
      prices: [],
      price: [],
      more: [],
      houseList: [],
      loadingList: false,
      finished: false,
      start: 1,
      end: 20,
      endtTotal: 20,
      barList: {
        area: '',
        subway: '',
        rentType: null,
        price: null
      }
    }
  },
  async created () {
    this.city = getCity()
    getSearchPos(this.city.value).then((res) => {
      this.condition = res.body
      setTimeout(() => {
        // 区域
        this.condition.area.children.forEach((item) => {
          const temp = {
            text: item.label,
            children: []
          }
          if (item.children) {
            item.children.forEach((item) => {
              temp.children.push({ text: item.label })
            })
          } else {
            temp.children.push({ text: '' })
          }
          console.log(temp)
          this.areas[0].children.push(temp)
        })
        // 地铁
        this.condition.subway.children.forEach((item) => {
          const temp = {
            text: item.label,
            children: []
          }
          if (item.children) {
            item.children.forEach((item) => {
              temp.children.push({ text: item.label })
            })
          } else {
            temp.children.push({ text: '' })
          }
          console.log(temp)
          this.areas[1].children.push(temp)
        })
        // 方式
        this.condition.rentType.forEach((item) => {
          const temp = { text: item.label }
          this.rentTypes.push(temp)
        })
        // 租金
        this.condition.price.forEach((item) => {
          const temp = { text: item.label }
          this.prices.push(temp)
        })
      }, 0)
      this.loading = false
    })
  },
  methods: {
    AreaFn (value) {
      this.area = value.text
      console.log(value)
      if (value[0] === '区域') {
        this.barList.subway = ''
        if (value[1] !== '不限') {
          const obj = this.condition.area.children.find((item) => item.label === value[1])
          if (value[2] !== '不限') {
            const obj2 = obj.children.find((item) => item.label === value[2])
            this.barList.area = obj2.value
          } else {
            this.barList.area = obj.value
          }
        } else {
          this.barList.area = ''
        }
      } else {
        this.barList.area = ''
        if (value[1] !== '不限') {
          const obj = this.condition.subway.children.find((item) => item.label === value[1])
          if (value[2] !== '不限') {
            const obj2 = obj.children.find((item) => item.label === value[2])
            this.barList.area = obj2.value
          } else {
            this.barList.area = obj.value
          }
        } else {
          this.barList.area = ''
        }
      }
      this.chickLoad()
    },
    rentTypeFn (value) {
      this.rentType = value.text
      console.log(value)
      if (value.text !== '不限') {
        this.barList.rentType = this.condition.rentType.find((item) => item.label === value.text).value
      } else {
        this.barList.rentType = null
      }
      this.chickLoad()
    },
    priceFn (value) {
      this.price = value.text
      console.log(value)
      if (value.text !== '不限') {
        this.barList.price = this.condition.price.find((item) => item.label === value.text).value
      } else {
        this.barList.price = null
      }
      this.chickLoad()
    },
    showFn (val) {
      this.show.forEach((item) => {
        if (item.name === val) {
          item.type = true
        } else {
          item.type = false
        }
      })
    },
    ChangeFn (value) {
      console.log(value)
      if (this.more.includes(value)) {
        this.more = this.more.filter((item) => item !== value)
        console.log(this.more)
      } else {
        this.more.push(value)
        console.log(this.more)
      }
    },
    chickLoad () {
      this.houseList = []
      this.show.forEach(item => { item.type = false })
      this.start = 1
      this.end = 20
      this.onLoad()
    },
    onLoad () {
      getHouse({
        cityId: this.city.value,
        stat: this.start,
        end: this.end,
        more: this.more.length ? this.more.join(',') : null,
        area: this.barList.area ? this.barList.area : null,
        rentType: this.barList.rentType,
        price: this.barList.price
      }).then(res => {
        this.houseList.push(...res.body.list)
        this.endtTotal = res.body.count
        this.loadingList = false
        this.start = this.start + 20
        this.end = this.end + 20
        console.log(res.body)
      })
      if (this.start > this.endtTotal) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.search {
  position: relative;
  z-index: 1;
  > div {
    background-color: @blue;
    height: 50px;
  }
}
.van-grid-item {
  border-bottom: 1px solid #e4e6f0;
  ::v-deep .van-grid-item__content {
    padding-top: 9px;
    padding-bottom: 9px;
    i {
      font-size: 12px;
      margin-left: 5px;
    }
  }
}
.van-grid {
  z-index: 9000;
  position: relative;
}
.van-sticky--fixed {
  .van-popup {
    margin-top: 39px;
  }
}
.van-popup {
  margin-top: 83px;
  border-radius: 0;
  ::v-deep .van-hairline-unset--top-bottom {
    border-top: 1px solid #ebedf0;
  }
  ::v-deep .van-picker__toolbar {
    border-top: 1px solid #e9e9e9;
    .van-picker__cancel {
      width: 120px;
      font-size: 18px;
      color: @blue;
    }
    .van-picker__confirm {
      flex: 1;
      font-size: 18px;
      color: #fff;
      background-color: @blue;
    }
  }
}
.popupRight {
  &.van-popup {
    margin: 0;
    width: 300px;
    height: 100vh;
  }
  ::v-deep .van-tabbar-item {
    border-top: 1px solid #ddd;
    flex: 0;
    font-size: 18px;
  }
  .nope {
    flex: 4;
    color: @blue;
  }
  .yep {
    flex: 6;
    color: #fff;
    background-color: @blue;
  }
  .upo {
    height: 100vh;
    overflow: scroll;
    padding-bottom: 60px;
    .title {
      font-size: 15px;
      margin: 15px 0 0 15px;
    }
    .checkbox {
      margin-top: 3em;
      padding-bottom: 10px;
      border-bottom: 1px solid #e5e5e5;
    }
    .checkbox:last-child {
      border-bottom: none;
    }
  }
}
.subs {
  ::v-deep .van-overlay {
    z-index: 100 !important;
  }
}
.subs.popupRightS {
  ::v-deep .van-overlay {
    z-index: 88888 !important;
  }
}
.list {
  padding-bottom: 60px;
  .van-cell{
    padding: 0;
  }
}
</style>
